<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";

onMounted(() => {
  getData();
});

const route = useRoute();
const id = route.query.id;
const cno=route.query.cno;
const courses = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const getData = () => {
  axios.get("http://localhost:8080/checkRate", {
    params: {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      tno: id,
      cno:cno
    }
  }).then(res => {
    // 计算等级
    const records = res.data.records.map(record => {
      const totalScore = parseInt(record.teachingContent) + parseInt(record.teachingFun) + parseInt(record.communication);
      let level;
      if (totalScore >= 0 && totalScore <= 3) {
        level = "特差";
      } else if (totalScore >= 4 && totalScore <= 6) {
        level = "差";
      } else if (totalScore >= 7 && totalScore <= 9) {
        level = "合格";
      } else if (totalScore >= 10 && totalScore <= 12) {
        level = "良好";
      } else if (totalScore >= 13 && totalScore <= 15) {
        level = "优秀";
      }
      return {...record, level };
    });
    courses.value = records;
    total.value = res.data.total;
  }).catch(err => {
    ElMessage.error("获取数据失败，请稍后重试");
    console.log(err);
  });
};

// 切换每页显示条数
const handleSizeChange = (pagesize) => {
  pageSize.value = pagesize;
  getData();
};

// 切换当前页码
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getData();
};
</script>

<template>
  <div>
    <el-table class="currentTable" :data="courses" :header-cell-style="{ background: '#f6f9fa' }">
      <!-- el-table-column 列 -->
      <el-table-column prop="session" label="学年" sortable></el-table-column>
      <el-table-column prop="semester" label="学期"></el-table-column>
      <el-table-column prop="teachingContent" label="教学内容"></el-table-column>
      <el-table-column prop="teachingFun" label="教学趣味"></el-table-column>
      <el-table-column prop="communication" label="沟通表达"></el-table-column>
      <el-table-column prop="personalAdvice" label="学生建议"></el-table-column>
      <el-table-column prop="level" label="等级"></el-table-column>
    </el-table>
    <el-pagination
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        :total="total"
        layout="prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="justify-content: center; margin-top: 8px"
    />
  </div>
  <el-form style="text-align: center">
    <div>1-特差，2-差，3-合格，4-良好，5-优秀</div>
  </el-form>
</template>

<style scoped>

</style>